import CustomSelect from '@/components/antd-comp/select/CustomSelect'
import React, {useMemo } from 'react'
import { useSourceOptions } from '@/pages/workflow/hooks/use-source-options'
import InputWithParamsV2 from '@/pages/workflow/components/InputWithParamsV2'

const RequestEditor = ({ value, onChange }) => {
  const { options } = useSourceOptions(value)
  
  // 转换 options 格式为 TextareaWithParamsV2 需要的格式
  const variableOptions = useMemo(() => {
    return options.reduce((acc, group) => {
      group.options.forEach(item => {
        acc.push({
          name: item.label,
          value: item.value,
          group: group.label
        })
      })
      return acc
    }, [])
  }, [options])

  return (
    <div className="">
      <div className="flex items-center gap-2">
        <CustomSelect
          value={value.method}
          onChange={v => onChange({ ...value, method: v })}
          style={{ width: 100 }}
          options={['GET', 'POST', 'PUT', 'DELETE', 'PATCH'].map(method => ({
            label: method,
            value: method
          }))}
        />
        <div className="relative flex-1">
          <InputWithParamsV2
            value={value.url || ''}
            onChange={(url) => onChange({ ...value, url })}
            citeOptions={variableOptions}
            placeholder="请输入URL，'/'快速插入变量"
            triggerChar="/"
            style={{ width: '300px' }}
          />
        </div>
      </div>
    </div>
  )
}

export default RequestEditor

